/*------------------------------------*\
    #PATTERN INFO
\*------------------------------------*/

/**
 * 1) Pattern info contains two side-by-side panels that
 *    house a pattern's information, such as title, lineage,
 *    code, annotations, and more.
 */
.pl-c-pattern-info {
  flex-grow: 1; // fills space available when placed in the parent flex container
  display: flex;
  flex-direction: column;

  /**
     *  Pattern info inside the "view all" template
     */
  .pl-c-pattern & {
    max-height: 30rem;
    overflow: scroll;
    display: block;
    -webkit-overflow-scrolling: touch;

    @media all and (min-width: $pl-bp-large) {
      max-height: none;
      height: 18rem;
      display: flex;
      flex-direction: row;
      overflow: visible;
    }
  }

  /**
     *  Pattern info inside modal
     */
  .pl-c-drawer & {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    flex-grow: 1;

    @media all and (min-width: $pl-bp-large) {
      position: static;
      flex-direction: row;
    }
  }
}

/**
 * Pattern Info Panel
 * 1) Individual panel. Left side contains pattern info
 *    Right side contains pattern code
 */
.pl-c-pattern-info__panel {
  padding: 0.5rem;
  flex-shrink: 0; // prevent panel from collapsing in height (especially on smaller screens like iPhone)
  display: flex;
  flex-direction: column;

  pl-drawer & {
    padding: 1rem;
  }

  @media all and (min-width: $pl-bp-large) {
    flex-basis: 50%;
    flex-grow: 1;
    padding: 1.5rem;
  }
}

/**
 * Pattern Info Panel
 * 1) Left panel that contains pattern title, lineage, description, annotations
 */
.pl-c-pattern-info__panel--info {
  @media all and (min-width: $pl-bp-large) {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  @media all and (min-width: $pl-bp-xl) {
    min-width: 50%;
  }
}

/**
 * Pattern Code Panel
 * 1) Right panel that displays the pattern's code (found in _tabs.scss)
 * 2) Using a sibling selector because the pattern info isn't always present.
 *    The sibling selector allows the code panel to occupy the full width of
 *    the modal
 * 1) Cap the height of the code panel in the modal
 */
.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code,
.pl-c-pattern-info__panel--code:first-child {
  flex-grow: 1;
  flex-shrink: 0; // so the code panel doesn't get chopped off accidently
  min-width: 50%;
}

.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code {
  @media all and (max-width: $pl-bp-large) {
    padding-top: 0;
  }
}

/**
 * Pattern Header inside modal
 */
.pl-c-pattern-info__header {
  margin-bottom: 0.5rem;
}

/**
 * Pattern Title inside modal
 */
.pl-c-pattern-info__title {
  font-size: 1.4rem !important;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
}

/**
 * Pattern Description inside modal
 */
.pl-c-pattern-info__description {
  border-bottom-color: $pl-color-gray-50;
}

/**
 * Pattern Annotations inside modal
 */
.pl-c-annotations {
  border-top-color: $pl-color-gray-50;
}
